body{
    width: 100%;
}
.step1{
    position: relative;
    max-width: 100vw;
    overflow: hidden;
}
@keyframes bgssRog {
    0%{
        overflow: hidden;
        opacity: 0;
        width: 20vw;
        height: 20vw;
        transform: translate(20vw, 52vw);
    }
    20%{
        opacity: 0;
        overflow: hidden;
        width: 20vw;
        height: 20vw;
        transform: translate(20vw, 52vw);
    }
    40%{
        opacity: 0;
        width: 20vw;
        overflow: hidden;
        height: 20vw;
        overflow: hidden;
        transform: translate(20vw, 52vw);
    }
    80%{
        opacity: 1;
        width: 20vw;
        overflow: hidden;
        height: 20vw;
        transform: translate(20vw, 52vw);
    }
    100%{
        width: 200vw;
        height: 200vw;
        transform: translate(20vw, 52vw);
    }
}
/*.step1-mask1{*/
/*    width: 200vw;*/
/*    height: 200vw;*/
/*    position: absolute;*/
/*    transform: translate(20vw, 52vw);*/
/*    border-radius: 50%;*/
/*    z-index: 2;*/
/*    transform-origin: 52vw 20vw;*/
/*    animation: bgssRog 3s linear;*/
/*}*/

.step1-mask1 img{
    width: 100vw!important;
    transform: translate(-20vw, -52vw);
}
@keyframes bgRog {
    0%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    65%{
        opacity: 0;
    }
}
.step1_bg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    z-index: 1;
    animation: bgRog 8s linear;
}
.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
@keyframes bgRo {
    0%{
        opacity: 0;
        background-size: 100vw;
        transform: translate(0vw,30vw);
    }
    20%{
        opacity: 0;
        background-size: 100vw;
        transform: translate(0vw,30vw);
    }
    45%{
        opacity: 1;
        background-size: 100vw;
        transform: translate(0vw,30vw);
    }
    62.5%{
        opacity: 1;
        transform: translate(49vw,83.5vw);
    }
    62.6%{
        opacity: 1;
        transform: translate(49vw,83.5vw);
    }
}
@keyframes bgRo1 {
    0%{
        background-position: -20vw -52vw;
    }
    20%{
        background-position: -20vw -52vw;
    }
    45%{
        background-position: -20vw -52vw;
    }
    62.5%{
        background-position: -68.9vw -103.5vw;
    }
    62.6%{
        background-position: -68.9vw -103.5vw;
    }
}
@keyframes bgRo2 {
    0%{
        transform: translate(-20vw ,-52vw);
        /*background-position: -20vw -52vw;*/
    }
    20%{
        transform: translate(-20vw ,-52vw);
        /*background-position: -20vw -52vw;*/
    }
    45%{
        transform: translate(-20vw ,-52vw);
        /**/
        /*background-position: -20vw -52vw;*/
    }
    62.5%{
        transform: translate(-68.9vw ,-103.5vw);
        /**/
        /*background-position: -68.9vw -103.5vw;*/
    }
    62.6%{
        transform: translate(-68.9vw ,-103.5vw);
        /*background-position: -68.9vw -103.5vw;*/
    }
}
.step1_mask{
    position: absolute;
    z-index: 2;
    left: 20vw;
    top: 20vw;
    margin: auto;
    width: 20vw;
    height: 20vw;
    overflow: hidden;
    border-radius: 50%;
    transform: translate(49vw,83.5vw);
    /*animation: bgRo 8s ease;*/
    -webkit-animation-name:bgRo;
    -webkit-animation-duration: 8s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count:1;
}
.step1_mask div{
    width: 100%;
    height: 100%;
    background-image: url("../img/step.jpg");
    background-repeat: no-repeat ;
    background-size: 100vw;
    background-position: -68.9vw -103.5vw;
    -webkit-animation-name:bgRo1;
    -webkit-animation-duration:8s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
}
.step1_mask img{
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-68.9vw, -103.5vw);
    /*height: 100%;*/
    /*background-image: url("../img/step.jpg");*/
    /*background-repeat: no-repeat ;*/
    /*background-size: 100vw;*/
    /*background-position: -68.9vw -103.5vw;*/
    -webkit-animation-name:bgRo2;
    -webkit-animation-duration:8s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
}
.step2{
    position: relative;
}
#canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.zIndex{
    position: relative;
    z-index: 2;
}
@keyframes LoopFade {
    0% {
        transform: translateY(0) ;
    }
    25% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(20px) scale(1.02, 1);

    }
    75% {
        ransform: translateY(5px) ;
    }
    100% {
        transform: translateY(0) ;
    }
}
.step2W{
    position: absolute;
    width: 25%;
    left: 10%;
    top: 26%;
    transform: translateY(-10px);
    animation: LoopFade 5s linear infinite;
}

.step3{
    position: relative;
    max-width: 100vw;
    overflow: hidden;
}
@keyframes LoopFade {
    0% {
        transform: translateY(0) ;
    }
    25% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(20px) scale(1.02, 1);

    }
    75% {
        ransform: translateY(5px) ;
    }
    100% {
        transform: translateY(0) ;
    }
}
@keyframes booun {
    0%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0.89,0.89);
    }
    100%{
        transform: scale(1, 1);
    }
}
.bacteria{
    position: absolute;
    left: 20vw;
    top: 111vw;
    width: 18vw;
    height: 18vw;
    animation: booun  1.5s linear infinite;
}
.bacteria1{
    position: absolute;
    right: 10vw;
    bottom: 40vw;
    width: 10vw;
    height: 10vw;
    animation: booun linear 2s infinite;
}

@keyframes shake {
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: rotate(-5deg);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: rotate(3deg);
    }
}
.bacteria2{
    position: absolute;
    left: 5vw;
    bottom: 40vw;
    width: 15vw;
    height: 15vw;
    animation: shake linear 5s infinite;
}
.bacteria3{
    position: absolute;
    right: 40vw;
    bottom: 45vw;
    width: 10vw;
    height: 10vw;
    animation: shake linear 3s infinite;
}

@keyframes run {
    0%{
        transform: scale(1.05, 1.2);
    }
    15%{
        transform: scale(1.1, 1.1);
    }
    30%{
        transform: scale(1.05, 1.2);
    }
    45%{
        transform: scale(1, 1.24);
    }
    60%{
        transform: scale(1.12, 1.3);
    }
    75%{
        transform: scale(1.08, 1.23);
    }
    90%{
        transform: scale(1.15, 1.3);
    }
    100%{
        transform: scale(1.05, 1.2);
    }
}
.step3_line{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    opacity: .5;
    animation: run linear 20s infinite;
}
.step4{
    position: relative;
    overflow: hidden;
    max-width: 100vw;
}
.step4-bg{
    position: absolute;
    right: -18vw;
    top: 50vw;
    animation: run linear 20s infinite;
}
@keyframes ImgSwitch {
    0%{
        opacity: 0;
    }
    15%{
        opacity: 1;
    }
    50%{
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
@keyframes ImgSwitchLeft{
    0%{
        transform: translateX(0vw);
    }
    10%{
        transform: translateX(-30vw);
    }
    50%{
        transform: translateX(-30vw);
    }
    60%{
        transform: translateX(0vw);
    }
    100%{
        transform: translateX(0vw);
    }
}
.step3-switch{
    position: absolute;
    left: 2vw;
    top: 35vw;
    width: 50vw;
    height: 50vw;
    overflow: hidden;
    border-radius: 50%;
}
.step3-switch-cont{
    width: 100vw;
    display: flex;
    animation: ImgSwitchLeft 10s linear infinite reverse;
    height: 50vw;
    background: url("../img/3-lines.png")no-repeat center;
    background-size: cover;

}
/*.step3-switch-cont::before{*/
/*    content: "";*/
/*    display: block;*/
/*    !*position: absolute;*!*/
/*    min-width: 50vw;*/
/*    min-height: 50vw;*/
/*    width: 50vw;*/
/*    height: 50vw;*/
/*    box-sizing: border-box;*/
/*    !*top: 0;*!*/
/*    !*left: 0;*!*/
/*    !*opacity: 0;*!*/
/*    background: url("../img/step3_1.png")no-repeat center;*/
/*    background-size: 100% 100%;*/
/*}*/
/*.step3-switch-cont::after{*/
/*    content: "";*/
/*    display: block;*/
/*    box-sizing: border-box;*/
/*    !*position: absolute;*!*/
/*    min-width: 50vw;*/
/*    min-height: 50vw;*/
/*    width: 50vw;*/
/*    height: 50vw;*/
/*    !*top: 0;*!*/
/*    !*left: 0;*!*/
/*    !*opacity: 1;*!*/
/*    background: url("../img/step3_2.png")no-repeat center;*/
/*    background-size: 100% 100%;*/
/*    !*animation: ImgSwitch 10s linear infinite;*!*/
/*}*/
.step4-po{
    position: absolute;
    width: 27vw;
    height: 27vw;
    left: 25vw;
    bottom: 55vw;
}
@keyframes raro {
    0%{
        transform: rotate(0) scale(2.2);
    }
    100%{
        transform: rotate(360deg) scale(2.2);
    }
}
.stepBor{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transform: scale(2.2);
    animation: raro 10s linear infinite;
}
.step5{
    position: relative;
    overflow: hidden;
    max-width: 100vw;
}
@keyframes raroq {
    0%{
        transform: rotate(0) scale(1.15);
    }
    100%{
        transform: rotate(360deg)  scale(1.15);
    }
}
.step5-o-1{
    position: absolute;
    width: 60vw;
    height: 60vw;
    left: 0;
    right: 0;
    margin: auto;
    top: 50vw;
}
.step5_1{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    transform: rotate(360deg)  scale(1.15);
    /*animation: raroq 10s linear infinite;*/
}
.step5-o-2{
    position: absolute;
    width: 45vw;
    height: 45vw;
    left: 5vw;
    bottom: 28vw;
}
.step5_2{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    animation: raroq 10s linear infinite;
}
@keyframes run2 {
    0%{
        transform: scale(2.05, 2.2);
    }
    15%{
        transform: scale(2.1, 2.1);
    }
    30%{
        transform: scale(2.05, 2.2);
    }
    45%{
        transform: scale(2, 2.24);
    }
    60%{
        transform: scale(2.12, 2.3);
    }
    75%{
        transform: scale(2.08, 2.23);
    }
    90%{
        transform: scale(2.15, 2.3);
    }
    100%{
        transform: scale(2.05, 2.2);
    }
}
.step5-bg{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    animation: run2 linear 20s infinite;
}
.step6{
    position: relative;
}
.step6_wx1{
    position: absolute;
    bottom: 10vw;
    left: 7vw;
    z-index: 2;
}

